<template>
  <div class="search">
    <div class="search-container">
      <input
        ref="search"
        name="search"
        autocomplete="off"
        class="transform"
        type="text"
        :readonly="isReadonly"
        @keyup.enter="submit"
        v-model="search"
        placeholder="搜资讯..."
      />
      <button type="button" @click="submit">搜索</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['keywords'],
  data () {
    return {
      search: '',
      isReadonly: true
    }
  },
  watch: {
    keywords(val) {
      this.search = val;
    }
  },
  created () {
    this.search = this.keywords
  },
  mounted () {
    this.$nextTick(() => {
      let timer = setTimeout(() => {
        this.$refs.search.focus();
        this.$nextTick(() => {
          this.isReadonly = false;
        })
        clearTimeout(timer);
        timer = null;
      }, 500);
    })
  },
  methods: {
    submit () { // 搜索
      const keywords = this.search ? this.search.trim() : '';
      this.$emit('toSearch', keywords)
    }
  }
}
</script>
<style lang="scss" scoped>
.search {
  height: 120px;
  padding-top: 30px;
  background: #f6f7f8;
  .search-container {
    height: 50px;
    line-height: 50px;
    width: 880px;
    margin: auto;
    font-size: 0;
    border-radius: 10px;
    box-shadow: 0 0 4px #eee;
    input {
      height: 100%;
      width: 750px;
      padding: 0 20px;
      margin: 0;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      font-size: 16px;
      vertical-align: middle;
      color: #333;
      border: 2px solid transparent;
      border-right: none;
      &:focus {
        border: 2px solid $base-color;
        border-right: none;
      }
    }
    button {
      height: 100%;
      width: 130px;
      background: $base-color;
      color: #fff;
      margin-left: -1px;
      border: none;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      font-size: 16px;
      vertical-align: middle;
      &:hover {
        background: $base-color-hover;
      }
    }
  }
}
</style>
